<template>
  <div class="example2">
    <code-container
      :code="thisCode"
      v-on:close="isShowCode = false"
      v-if="isShowCode"
    ></code-container>
    <div class="border">
      <a href="JavaScript:;" class="look-code" @click="lookCode('radar')">代码</a>
      <data-v-radar
        radarType="2"
        :indicator="indicator"
        :chartOptions="chartOptions"
      ></data-v-radar>
    </div>
    <div class="border">
      <a href="JavaScript:;" class="look-code" @click="lookCode('customGauge')"
        >代码</a
      >
      <data-v-customGauge
        :chartOptions="chartOptions"
        :value="50"
      ></data-v-customGauge>
    </div>
    <div class="border">
      <a href="JavaScript:;" class="look-code" @click="lookCode('line')"
        >代码</a
      >
      <data-v-line
        :radarType="1"
        :chartOptions="chartOptions"
        :optionParams="{
          max: 120,
          min: 0,
          data: [20, 60, 80, 30, 50],
        }"
      ></data-v-line>
    </div>
    <div class="border">
      <a href="JavaScript:;" class="look-code" @click="lookCode('funnel')">代码</a>
      <data-v-funnel
        :chartOptions="chartOptions"
        :optionParams="{
          minSize: 20,
          data: [
            { name: '一', value: 40 },
            { name: '二', value: 60 },
            { name: '三', value: 80 },
            { name: '四', value: 20 },
          ],
        }"
      ></data-v-funnel>
    </div>
    <div class="border">
      <a href="JavaScript:;" class="look-code" @click="lookCode('title')">代码</a>
      <data-v-title title="模块名称"></data-v-title>
      <data-v-title
        title="模块名称"
        :titleType="2"
        :titleStyle="{
          textAlign: 'left',
          marginTop: '20px',
          paddingLeft: '10px',
        }"
      ></data-v-title>
      <data-v-title
        title="模块名称"
        :titleType="3"
        :titleStyle="{ textAlign: 'center', marginTop: '20px' }"
      ></data-v-title>
      <data-v-title
        title="模块名称"
        :titleType="4"
        :titleStyle="{ textAlign: 'center', marginTop: '20px' }"
      ></data-v-title>
      <data-v-title
        title="模块名称"
        :titleType="5"
        :titleStyle="{ textAlign: 'center', marginTop: '20px' }"
      ></data-v-title>
    </div>
    <div class="border">
      <data-v-radar
        radarType="3"
        :indicator="indicator"
        :chartOptions="chartOptions"
      ></data-v-radar>
    </div>
    <div class="border">
      <data-v-customGauge
        :gaugeType="2"
        :value="60"
        :chartOptions="chartOptions"
      ></data-v-customGauge>
    </div>
    <div class="border">
      <data-v-line
        :chartType="2"
        :chartOptions="chartOptions"
        :optionParams="{
          max: 120,
          min: 0,
          data: [20, 60, 80, 30, 50],
        }"
      ></data-v-line>
    </div>
    <div class="border">
      <data-v-funnel
        :chartOptions="chartOptions"
        :chartType="2"
        :optionParams="{
          minSize: 20,
          data: [
            { name: '一', value: 40 },
            { name: '二', value: 60 },
            { name: '三', value: 80 },
            { name: '四', value: 20 },
          ],
        }"
      ></data-v-funnel>
    </div>
    <div class="border">
      <data-v-title
        title="模块名称"
        :titleType="6"
        :titleStyle="{
          textAlign: 'left',
          paddingLeft: '10px',
        }"
      ></data-v-title>
      <data-v-title
        title="模块名称"
        :titleType="7"
        :titleStyle="{ textAlign: 'center', marginTop: '20px' }"
      ></data-v-title>
      <data-v-title
        title="模块名称"
        :titleType="8"
        :titleStyle="{ textAlign: 'center', marginTop: '20px' }"
      ></data-v-title>
      <data-v-title
        title="模块名称"
        :titleType="9"
        :titleStyle="{ textAlign: 'center', marginTop: '20px' }"
      ></data-v-title>
      <data-v-title
        title="模块名称"
        :titleType="10"
        :titleStyle="{ textAlign: 'center', marginTop: '20px' }"
      ></data-v-title>
    </div>
    <div class="border">
      <data-v-radar
        radarType="4"
        :indicator="indicator"
        :chartOptions="chartOptions"
      ></data-v-radar>
    </div>
    <div class="border">
      <data-v-customGauge
        :gaugeType="3"
        :value="80"
        :chartOptions="chartOptions"
      ></data-v-customGauge>
    </div>
    <div class="border">
      <data-v-line
        :chartType="3"
        :chartOptions="chartOptions"
        :optionParams="{
          max: 120,
          min: 0,
          data: [20, 60, 80, 30, 50],
        }"
      ></data-v-line>
    </div>
    <div class="border"></div>
    <div class="border">
      <data-v-title
        title="模块名称"
        :titleType="11"
        :titleStyle="{ textAlign: 'center' }"
      ></data-v-title>
      <data-v-title
        title="模块名称"
        :titleType="12"
        :titleStyle="{
          textAlign: 'left',
          marginTop: '20px',
          paddingLeft: '10px',
        }"
      >
        <div>内容</div>
      </data-v-title>
    </div>
    <go-home></go-home>    
  </div>
</template>

<script>
import CodeContainer from "./code-container.vue";

export default {
  name: "example5",
  components: {
    CodeContainer,
  },
  data() {
    return {
      isShowCode: false,
      chartOptions: {},
      rankList: [
        { name: "add", count: 811 },
        { name: "sea", count: 116 },
        { name: "aee", count: 80 },
        { name: "yhl", count: 6 },
        { name: "sea", count: 6 },
        { name: "add", count: 80 },
        { name: "sea", count: 6 },
        { name: "aee", count: 80 },
        { name: "yhl", count: 6 },
        { name: "sea", count: 6 },
      ],
      indicator: [
        { name: "（sales）", max: 6500 },
        { name: "（Administration）", max: 16000 },
        { name: "（Information\nTechology）", max: 30000 },
        { name: "（Customer\nSupport）", max: 38000 },
        { name: "（Development）", max: 52000 },
        { name: "（Marketing）", max: 25000 },
      ],
      maxVal: 1000,
    };
  },
  methods: {
    lookCode(name) {
      let filePath = `./docs/${name}.md`;
      // eslint-disable-next-line no-undef
      let loading = ui.loading(2, "加载中...");
      // eslint-disable-next-line no-undef
      get(filePath).then((res) => {
        loading.hide();
        this.thisCode = res;
        this.isShowCode = true;
      });
    },
  },
  mounted() {
    // setTimeout(()=>{
    //   this.chartOptions={
    //     legend:{
    //       textStyle:{
    //         color:'red'
    //       }
    //     }
    //   }
    // },2000)
  },
};
</script>

<style>
.example2 {
  padding: 10px 0;
  height: 100vh;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
  background: #000 url(./example1-img/gridBg.png);
  /* justify-content: space-between; */
}

.border {
  padding: 10px;
  border: 1px solid #5e6163;
  box-sizing: border-box;
  height: calc(33.3% - 10px);
  border-radius: 5px;
  display: block;
  margin-left: 10px;
  width: calc(20% - 12px);
  overflow: auto;
}
.border::-webkit-scrollbar {
  display: none;
}

.border a {
  text-align: right;
  display: inline-block;
  width: 100%;
  color: #5e6163 !important;
  font-size: 13px;
  margin-bottom: 5px;
}
.border a:hover {
  color: rgba(10, 175, 252, 0.952) !important;
}

.example2 h1 {
  color: #fff;
}

.example2 .look-code {
  color: rgb(10, 136, 10);
  text-decoration: none;
}

.example2 .look-code:hover {
  color: #1aad19;
}

.dataVsroll {
  height: 200px;
}
.green {
  color: green;
}
.red {
  color: red;
}
</style>
